import React, { useContext } from 'react';
const themes = {
    light: {
        foreground: '#000000',
        background: '#eeeeee',
    },
    dark: {
        foreground: '#ffffff',
        background: '#222222',
    },
};

const ThemeContext = React.createContext();
let currentTheme = themes.dark;
function changeTheme() {
    currentTheme = themes.light;
}
function Context() {
    return (
        <ThemeContext.Provider value={currentTheme}>
            <Toolbar />
            <button onClick={changeTheme}>切换皮肤</button>
        </ThemeContext.Provider>
    );
}

function Toolbar(props) {
    return (
        <div>
            <ThemeButton></ThemeButton>
        </div>
    );
}
function ThemeButton() {
    const theme = useContext(ThemeContext);
    console.log(theme);
    return <button style={{ background: theme.background, color: theme.foreground }}>theme context</button>;
}
export default Context;
